<template>
  <el-container>
    <el-container>
      <el-aside>
        <Aside />
      </el-aside>
      <el-main>
        <component :is="component" :key="activeMenu?.value"></component>
      </el-main>
    </el-container>
  </el-container>
</template>

<script lang="ts" setup>
import Aside from '@/layout/Aside.vue'
import { useMenu } from '@/layout/hooks/useMenu'
import { shallowRef, unref, watch } from 'vue'

const { activeMenu } = useMenu()
const component = shallowRef()
watch(
  () => unref(activeMenu),
  (menu) => {
    if (!menu) return
    component.value = menu.value.slice(0, 1) + menu.value.slice(1)
  },
)
</script>

<style scoped lang="less">
.el-container {
  height: 100%;
}
.el-header {
  line-height: var(--el-header-height);
  background-color: var(--el-color-primary-light-7);
}
.el-main {
  background-color: var(--el-color-primary-light-9);
}
</style>
